<template>
    <el-dialog title="新 增" :visible.sync="thisAddPage" :before-close="handleClose">
        <el-form ref="brandFrom" :model="brandFrom" label-width="135px" :rules="rules">
        <el-form-item label="品牌名称"  prop="brandName">
            <el-input  v-model="brandFrom.brandName" style="width:80%" placeholder="请输入品牌名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌编码"  prop="brandCode">
            <el-input v-model="brandFrom.brandCode" style="width:80%" placeholder="请输入品牌编码"></el-input>
        </el-form-item>
        <el-form-item label="所属厂商"  prop="brandFirm">
            <el-input v-model="brandFrom.brandFirm" style="width:80%" placeholder="请输入所属厂商"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="brandFrom.remark" style="width:80%" placeholder="请输入备注"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" prop="brandLogo">
            <el-card shadow="hover" class="el-card-logo">
              <el-image :src="imgObject.localMainImage">
                <div slot="error" class="image-slot">
                  <i>请添加品牌LOGO</i>
                </div>
              </el-image>
            </el-card>
            <div style="margin-top: 20px;">
				<el-button long @click="addPic" icon="md-add"> 添加图片 </el-button>
				<span style="color: red; margin-left: 20px;">温馨提示：请上传256*256像素的PNG、JPG格式的图片，大小不超过2M。</span>
			</div>
            <keep-alive>
              <uploadImage
                :pageStatus="isPic"
                @on-change="onPicChange"
                @on-result="onPicResult"
                :pageData="imgType"
                @on-click="addPic"
              ></uploadImage>
            </keep-alive>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('brandFrom')">保存</el-button>
            <el-button @click="resetForm('brandFrom')">重 置</el-button>
            <el-button @click="closeAddChange">取 消</el-button>
        </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script>
import { save } from '@api/product/productBrand'
import { mapActions, mapState } from 'vuex'
import uploadImage from '../../common/uploadImage'
export default {
  components: {
    uploadImage
  },
  data () {
    return {
      thisAddPage: this.addPage,
      brandFrom: {
        id: '',
        brandName: '',
        brandCode: '',
        brandLogo: '',
        brandFirm: '',
        remark: ''
      },
      isPic: false,
      imgType: 0,
      imgObject: {
        localMainImage: '',
        mainImage: ''
      },
      rules: {
        brandName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],
        brandCode: [
          { required: true, message: '请输入品牌编码', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],
        brandLogo: [
          { required: true, message: '请上传品牌LOGO', trigger: 'blur' }
        ],
        brandFirm: [
          { required: true, message: '请输入所属厂商', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur' }
        ],
        remark: [
          { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  /** 双向绑定 start */
  props: ['addPage'],
  watch: {
    addPage (val) {
      this.thisAddPage = val// ②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
    },
    thisAddPage (val) {
      this.$emit('on-addPage-change', val)// ③组件内对myResult变更后向外部发送事件通知
    }
  },
  /** 双向绑定 end */
  methods: {
    closeAddChange () {
      this.thisAddPage = !this.thisAddPage
      this.$refs['brandFrom'].resetFields()
      this.imgObject = {
        localMainImage: '',
        mainImage: ''
      }
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          save(this.brandFrom).then(res => {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$emit('on-loadlist-change')// ③组件内对myResult变更后向外部发送事件通知
            this.loading = false
            this.closeAddChange()
          }).catch(err => {
            console.log('err', err)
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.imgObject = {
        localMainImage: '',
        mainImage: ''
      }
    },
    handleClose (done) {
      this.$confirm('确定关闭吗？').then(() => {
        this.$refs['brandFrom'].resetFields()
        this.imgObject = {
          localMainImage: '',
          mainImage: ''
        }
        done()
      }).catch(() => {

      })
    },
    ...mapActions('d2admin/page', ['close']),
    addPic (row) {
      this.imgType = 4
      this.isPic = !this.isPic
    },
    onPicChange (val) {
      this.isPic = val // ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    onPicResult (val) {
      this.imgObject = val
      this.brandFrom.brandLogo = this.imgObject.mainImage
    }
  },
  created () {
  },
  mounted () {
  },
  computed: {
    ...mapState('d2admin/page', [
      'opened',
      'current' // 用户获取当前页面的地址，用于关闭
    ])
  }
}
</script>
<style scoped lang="scss">
.el-card-logo {
  height: 256px !important;
  width: 256px !important;
}
.el-card-logo .el-card__body {
  height: 256px !important;
  width: 256px !important;
  padding: 0px !important;
}

.el-image {
	width: 100%;
	height: 100%;
}
::v-deep .image-slot {
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	display: flex;
}
</style>
